import { history } from '@umijs/max';
import { NavBar, Toast, Collapse } from 'antd-mobile';
import { fetchSubmitTask } from './server'
import { useState, useEffect, useRef } from 'react';
import styles from './index.less'
import QRCode from 'qrcode'

export default () => {
  const [qrcodeImg, setQrcodeImg] = useState('');
  const [coment, setComent] = useState('');
  const timer = useRef<any>(null);
  const handler = useRef<any>(null);
  const back = () => {
    history.back()
  };

  const getcode = (code: string) => {
    QRCode.toDataURL(code).then((url: string) => {
      setQrcodeImg(url)
    }).catch((err: any) => {
      console.error(err)
    })
  }

  const getSubmitTask = async (id: any) => {
    const response = await fetchSubmitTask(id)
    if (response?.comment?.content) {
      setComent(response?.comment?.content)
      getcode(response?.comment?.qrcode)

      clearTimeout(timer.current)
      timer.current = null
      handler.current?.close()
    } else {
      timer.current = setTimeout(() => {
        getSubmitTask(id)
      }, 5000)
    }
  }

  // useEffect(() => {
  //   if (id) {
  //     handler.current = Toast.show({
  //       icon: 'loading',
  //       content: '加载中…',
  //       maskClickable: false,
  //       duration: 0,
  //     })
  //     getSubmitTask(id)
  //   }
  // }, [id])

  return (
    <div>
      <NavBar back="返回" onBack={back}>
        详情页面
      </NavBar>

      <Collapse defaultActiveKey={['1']}>
        <Collapse.Panel key='1' title='第一项'>
          <div className={styles.wrap}>
            <div className={styles.content}>{coment}</div>
            <div className={styles.imgs}>
              <img src={qrcodeImg} alt="" />
            </div>
          </div>
        </Collapse.Panel>
      </Collapse>
    </div>
  );
};
